<template>
  <div class="page-live-content">
    <div class="tab-block">
      <div :class="tabIndex===3?'active':''" @click="tabIndex=3" class="tab-item">直播预告</div>
      <div :class="tabIndex===1?'active':''" @click="tabIndex=1" class="tab-item">直播中</div>
      <div :class="tabIndex===2?'active':''" @click="tabIndex=2" class="tab-item">已结束</div>
    </div>
    <div class="content-block">
      <template v-if="list.length>0">
        <template v-if="tabIndex===1">
          <router-link :to="{name:'play',query:{roomNo:item.roomNo}}" v-for="item in list" :key="item.index"
                       class="live-item">
            <div class="cover-block">
              <img class="cover" :src="item.coverUrl"/>
              <div class="source">{{ item.realName }}</div>
              <div class="view-count">
                <div class="iconfont icon-yanjing"></div>{{item.audience}}人在看</div>
            </div>
            <div class="title">{{ item.roomName }}</div>
          </router-link>
        </template>
        <template v-if="tabIndex===3">
          <router-link :to="{name:'trailer',query:{id:item.id}}" v-for="item in list" :key="item.index"
                       class="live-item">
            <div class="cover-block">
              <img class="cover" :src="item.coverUrl"/>
              <div class="source">开播时间：{{ item.startTime }}</div>
            </div>
            <div class="title">{{ item.title }}</div>
          </router-link>
        </template>
        <template v-else>
          <div v-for="(item,index) in list" :key="index"  class="live-item">

            <div class="cover-block" @click="getLive(item.roomNo)">
              <img  class="cover" :src="item.coverUrl"/>
              <div class="source">{{ item.realName }}</div>
            </div>
            <div class="title">{{ item.roomName }}</div>
          </div>
        </template>
      </template>
      <el-empty v-else style="margin: 0 auto"></el-empty>
    </div>
    <el-pagination
        background
        style="margin: 0 auto;margin-top: 20px"
        v-if="list.length>0"
        :page-size="limit"
        :current-page="page"
        layout="prev, pager, next"
        :total="count"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import {getLiveAllList, livePortendList} from '@/api/live';

export default {
  name: "live",
  data() {
    return {
      tabIndex: 3,
      list: [],
      page: 1,
      limit: 10,
      count: 0,
    }
  },
  watch: {
    tabIndex: {
      immediate: true,
      handler: function () {
        this.list=[];
        this.count=0
        this.page=1;
        this.$nextTick(() => {
          this.getLiveList();
        })
      }
    }
  },
  methods: {
    getLive(roomNo) {
      if(this.tabIndex==2)
      {
        this.$message.info('暂未开通回放功能');
        return;
      }

      this.$router.push({
        name: 'endLive',
        query: {
          roomNo: roomNo,
          type: 1
        }
      })
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getLiveList()
    },
    getLiveList() {
      const loading = this.$loading({'text': '加载中'})
      if(this.tabIndex==1||this.tabIndex==2){
        getLiveAllList({type: this.tabIndex, page: this.page, limit: this.limit}).then((res) => {
          loading.close()
          this.list = res.list;
          this.count=res.count
        }).finally(() => {
          loading.close()
        })
      }else{
        livePortendList({page:this.page,limit:this.limit}).then((res)=>{
          this.list = res.list;
          this.count=res.count
        }).finally(()=>{
          loading.close();
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.page-live-content {
  min-height: $fullMinHeight;
  display: flex;
  flex-direction: column;
  align-items: center;

  .tab-block {
    margin: 30px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid $orange;
    width: 270px;
    height: 40px;
    border-radius: 5px;

    .tab-item {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $orange;
      cursor: pointer;
    }

    .tab-item.active {
      background: $orange;
      color: #fff;
    }
  }

  .content-block {
    width: $contentWidth;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-top: 0;

    .live-item {
      width: calc((100% - 80px) / 5);
      margin-right: 20px;
      height: 155px;
      margin-top: 20px;

      .cover-block {
        width: 100%;
        height: 125px;
        border-radius: 5px;
        position: relative;
        overflow: hidden;

        .cover {
          width: 100%;
          height: 100%;
        }
        .view-count {
          position: absolute;
          right: 5px;
          bottom:5px;
          font-size: 14px;
          color: #fff;
          display: flex;
          flex-direction: row;
          align-items: center;
          text-shadow: 0 0 2px black;
          .iconfont {
            color: #fff;
            margin-right: 8px;
          }
        }
        .source {
          position: absolute;
          left: 5px;
          bottom: 5px;
          color: #fff;
          font-size: 14px;
          text-shadow: 0 0 2px black;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: calc(100% - 10px);
        }
      }

      .title {
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .live-item:nth-child(5n) {
      margin-right: 0;
    }
  }
}
</style>
